Page({
  data: {
    schema:[
    ],
    formData:{
    },
    title: '',
    result: '',
    remark: '',
    apiName: '',
    animationData: {},
     // 记录当前动画状态
     currentState: {
      x: 0,
      y: 0,
      scale: 1,
      rotate: 0
    },
    boxColor: '#007aff',
    // 记录当前动画状态，用于重置
    currentTranslateX: 0,
    currentTranslateY: 0,
    currentRotate: 0,
    currentScale: 1,
    currentSkewX: 0,
    currentSkewY: 0,
    currentOpacity: 1
  },

  onLoad(options) {
    wx.setNavigationBarTitle({
      title: options.title,
    })
    
    this.setData({
      title: options.title,
      zh:options.zh,
      remark: options.remark,
      webUrl: options.webUrl
    })
    // 初始化动画
    this.animation = wx.createAnimation({
      duration: 1000, // 动画持续时间，单位ms
      timingFunction: 'ease', // 动画效果函数
      delay: 0, // 动画延迟时间，单位ms
      transformOrigin: '50% 50% 0' // 变换的原点
    })
  },

  // 平移动画
  translate(e) {
    // 每次点击向右下方平移50rpx
    this.data.currentTranslateX += 50
    this.data.currentTranslateY += 50
    
    // 调用translate方法，参数为平移的x和y距离
    this.animation.translate(
      this.data.currentTranslateX, 
      this.data.currentTranslateY
    ).step() // 表示一组动画完成
    
    // 将动画数据导出到data中
    this.setData({
      animationData: this.animation.export()
    })
    this.setData({
      result: this.animation.translate(
        this.data.currentTranslateX, 
        this.data.currentTranslateY
      ).step(),
      apiName: e.currentTarget.dataset.apiname
    })
  },
  translate3d(e){
    this.animation
      // 平移同时旋转
      .translate3d('100rpx', '50rpx', '60rpx')
      .rotateY(60)
      .step()
      // 继续移动并旋转
      .translate3d('200rpx', '100rpx', '100rpx')
      .rotateY(120)
      .step()
      // 复位
      .translate3d('0', '0', '0')
      .rotateY(0)
      .step()
    
    this.setData({
      animationData: this.animation.export()
    })
    this.setData({
      result:this.animation
      // 平移同时旋转
      .translate3d('100rpx', '50rpx', '60rpx')
      .rotateY(60)
      .step()
      // 继续移动并旋转
      .translate3d('200rpx', '100rpx', '100rpx')
      .rotateY(120)
      .step()
      // 复位
      .translate3d('0', '0', '0')
      .rotateY(0)
      .step(),
      apiName: e.currentTarget.dataset.apiname
    })
  },
  translateX(e){
    this.animation
      .translateX('500rpx')
      .step({ 
        duration: 1000,
        timingFunction: 'ease-out' // 先快后慢
      })
      
    this.setData({
      animationData: this.animation.export(),
      currentX: 500
    })
  },
  translateY(e){
    this.animation
      .translateY('500rpx')
      .step({ 
        duration: 1000,
        timingFunction: 'ease-out' // 先快后慢
      })
      
    this.setData({
      animationData: this.animation.export(),
      currentX: 500
    })
    this.setData({
      result:this.animation
      .translateY('500rpx')
      .step({ 
        duration: 1000,
        timingFunction: 'ease-out' // 先快后慢
      }),
      apiName: e.currentTarget.dataset.apiname
    })
  },
  translateZ(e){
    // 先向前移动并旋转，再向后移动恢复
    this.animation
      .translateZ('300rpx')
      .rotateY(180)
      .step({ duration: 800 })
      .translateZ('0rpx')
      .rotateY(0)
      .step({ duration: 800 })
      
    this.setData({
      animationData: this.animation.export(),
      currentZ: 0
    })
    this.setData({
      result:this.animation
      .translateZ('300rpx')
      .rotateY(180)
      .step({ duration: 800 })
      .translateZ('0rpx')
      .rotateY(0)
      .step({ duration: 800 }),
      apiName: e.currentTarget.dataset.apiname
    })
  },
  // 旋转动画
  rotate(e) {
    // 每次点击旋转90度
    this.data.currentRotate += 90
    
    // 调用rotate方法，参数为旋转角度（deg）
    this.animation.rotate(this.data.currentRotate).step({
      // 可以为单个动画设置不同的参数
      duration: 800,
      timingFunction: 'ease-in-out'
    })
    
    this.setData({
      animationData: this.animation.export()
    })
    this.setData({
      result: this.animation.rotate(this.data.currentRotate),
      apiName: e.currentTarget.dataset.apiname
    })
  },
  rotate3d(e){
    this.animation
    .rotate3d(1, 1, 1, 180) // 沿空间对角线旋转
    .step()
  this.setData({
    animationData: this.animation.export(),
    info: "围绕空间对角线旋转180度"
  })
       this.setData({
         result: this.animation
         .rotate3d(1, 1, 1, 180),
         apiName: e.currentTarget.dataset.apiname
       })
  },
  rotateX(e){
    this.animation
      .rotateX(45) // 围绕X轴旋转45度
      .step() // 标记当前动画步骤完成
      
    this.setData({
      animationData: this.animation.export() // 导出动画并应用
    })
    this.setData({
      result: this.animation
      .rotateX(45),
      apiName: e.currentTarget.dataset.apiname
    })
  },
  rotateY(e){
    this.animation
      .rotateY(45) // 围绕Y轴旋转45度
      .step() // 标记当前动画步骤完成
      
    this.setData({
      animationData: this.animation.export() // 导出动画并应用
    })
    this.setData({
      result: this.animation
      .rotateY(45),
      apiName: e.currentTarget.dataset.apiname
    })
  },
  rotateZ(e){
    this.animation
    .rotateZ(45) // 围绕Y轴旋转45度
    .step() // 标记当前动画步骤完成
    
  this.setData({
    animationData: this.animation.export() // 导出动画并应用
  })
  this.setData({
    result: this.animation
    .rotateZ(45),
    apiName: e.currentTarget.dataset.apiname
  })
  },
  // 缩放动画
  scale(e) {
    // 每次点击在原来基础上缩放1.2倍，最大到2倍，然后重置
    this.data.currentScale = this.data.currentScale * 1.2 > 2 ? 0.5 : this.data.currentScale * 1.2
    
    // 调用scale方法，参数为x和y方向的缩放倍数
    this.animation.scale(this.data.currentScale).step({
      duration: 600,
      timingFunction: 'ease-out'
    })
    
    this.setData({
      animationData: this.animation.export()
    })
    this.setData({
      result: this.animation.scale(this.data.currentScale),
      apiName: e.currentTarget.dataset.apiname
    })
  },
  scale3d(e){
    // 复杂的3D缩放组合
    this.animation
      .scale3d(0.8, 1.5, 0.5)
      .step({ duration: 600 })
      .scale3d(1.5, 0.8, 2)
      .step({ duration: 600 })
      .scale3d(1, 1, 1)
      .step({ duration: 600 })
    
    this.setData({
      animationData: this.animation.export()
    })
    this.setData({
      result: this.animation
      .scale3d(0.8, 1.5, 0.5)
      .step({ duration: 600 })
      .scale3d(1.5, 0.8, 2)
      .step({ duration: 600 })
      .scale3d(1, 1, 1)
      .step({ duration: 600 }),
      apiName: e.currentTarget.dataset.apiname
    })
  },
  scaleX(e){
    this.animation
    .scaleX(1.5)
    .step({ duration: 300 })
    .scaleX(0.5)
    .step({ duration: 300 })
    .scaleX(1.2)
    .step({ duration: 300 })
    .scaleX(0.8)
    .step({ duration: 300 })
    .scaleX(1)
    .step({ duration: 300 })
  
  this.setData({
    animationData: this.animation.export()
  })
  this.setData({
    result:this.animation
    .scaleX(1.5)
    .step({ duration: 300 })
    .scaleX(0.5)
    .step({ duration: 300 })
    .scaleX(1.2)
    .step({ duration: 300 })
    .scaleX(0.8)
    .step({ duration: 300 })
    .scaleX(1)
    .step({ duration: 300 }),
    apiName: e.currentTarget.dataset.apiname
  })
  },
  scaleY(e){
    this.animation
    .scaleY(1.5)
    .step({ duration: 300 })
    .scaleY(0.5)
    .step({ duration: 300 })
    .scaleY(1.2)
    .step({ duration: 300 })
    .scaleY(0.8)
    .step({ duration: 300 })
    .scaleY(1)
    .step({ duration: 300 })
  
  this.setData({
    animationData: this.animation.export()
  })
  this.setData({
    result:this.animation
    .scaleY(1.5)
    .step({ duration: 300 })
    .scaleY(0.5)
    .step({ duration: 300 })
    .scaleY(1.2)
    .step({ duration: 300 })
    .scaleY(0.8)
    .step({ duration: 300 })
    .scaleY(1)
    .step({ duration: 300 }),
    apiName: e.currentTarget.dataset.apiname
  })
  },
  scaleZ(e){
    this.animation
      // 整体缩小Z轴，模拟后退
      .scale3d(0.8, 0.8, 0.2)
      .translateZ(-100)
      .step()
      // 放大Z轴，模拟前进
      .scale3d(1.2, 1.2, 2)
      .translateZ(100)
      .step()
      // 恢复
      .scale3d(1, 1, 1)
      .translateZ(0)
      .step()
  
  this.setData({
    animationData: this.animation.export()
  })
  this.setData({
    result:this.animation
    // 整体缩小Z轴，模拟后退
    .scale3d(0.8, 0.8, 0.2)
    .translateZ(-100)
    .step()
    // 放大Z轴，模拟前进
    .scale3d(1.2, 1.2, 2)
    .translateZ(100)
    .step()
    // 恢复
    .scale3d(1, 1, 1)
    .translateZ(0)
    .step(),
    apiName: e.currentTarget.dataset.apiname
  })
  },
  // 倾斜动画
  skew(e) {
    // 每次点击在x和y方向各倾斜15度
    this.data.currentSkewX += 15
    this.data.currentSkewY += 15
    
    // 调用skew方法，参数为x和y方向的倾斜角度（deg）
    this.animation.skew(
      this.data.currentSkewX, 
      this.data.currentSkewY
    ).step({
      duration: 700
    })
    
    this.setData({
      animationData: this.animation.export()
    })
    this.setData({
      result:this.animation.skew(
        this.data.currentSkewX, 
        this.data.currentSkewY
      ).step({
        duration: 700
      }),
      apiName: e.currentTarget.dataset.apiname
    })
  },
 // 倾斜动画
 skewX(e) {
  // 每次点击在x方向各倾斜15度
  this.data.currentSkewX += 15
  
  // 调用skew方法，参数为x和y方向的倾斜角度（deg）
  this.animation.skewX(
    this.data.currentSkewX
  ).step({
    duration: 700
  })
  
  this.setData({
    animationData: this.animation.export()
  })
  this.setData({
    result:this.animation.skewX(
      this.data.currentSkewX
    ).step({
      duration: 700
    }),
    apiName: e.currentTarget.dataset.apiname
  })
},
 // 倾斜动画
 skewY(e) {
  // 每次点击在y方向各倾斜15度
  this.data.currentSkewY += 15
  
  // 调用skew方法，参数为x和y方向的倾斜角度（deg）
  this.animation.skewY(
    this.data.currentSkewY
  ).step({
    duration: 700
  })
  
  this.setData({
    animationData: this.animation.export()
  })
  this.setData({
    result:this.animation.skewY(
      this.data.currentSkewY
    ).step({
      duration: 700
    }),
    apiName: e.currentTarget.dataset.apiname
  })
},
step(e){
  // 记录动画前的状态
  const prevState = { ...this.data.currentState }
    
  // 执行动画（链式调用step()）
  this.animation
    .translateX(prevState.x + 50)
    .translateY(prevState.y + 30)
    .rotate(prevState.rotate + 30)
    .scale(prevState.scale * 1.1)
    .step() // 返回animation实例，支持链式调用
    // 更新当前状态（手动计算，因为无法直接从动画对象获取）
    const newState = {
      x: prevState.x + 50,
      y: prevState.y + 30,
      rotate: prevState.rotate + 30,
      scale: prevState.scale * 1.1
    }
    console.log("当前动画状态",newState)
  this.setData({
    result:this.animation
    .translateX(prevState.x + 50)
    .translateY(prevState.y + 30)
    .rotate(prevState.rotate + 30)
    .scale(prevState.scale * 1.1)
    .step(),
    apiName: e.currentTarget.dataset.apiname
  })
},
  // 透明度动画
  opacity() {
    // 切换透明度（0.2 <-> 1）
    this.data.currentOpacity = this.data.currentOpacity > 0.5 ? 0.2 : 1
    
    // 调用opacity方法，参数为透明度值（0-1）
    this.animation.opacity(this.data.currentOpacity).step({
      duration: 500,
      timingFunction: 'linear'
    })
    
    this.setData({
      animationData: this.animation.export()
    })
    this.setData({
      result: this.animation.opacity(this.data.currentOpacity)
    })
  },

  // 颜色变化（通过CSS transition实现）
  colorChange() {
    // 随机生成颜色
    const colors = ['#007aff', '#4cd964', '#ff9500', '#ff2d55', '#5856d6', '#af52de']
    const randomColor = colors[Math.floor(Math.random() * colors.length)]
    
    this.setData({
      boxColor: randomColor
    })
  },

  // 组合动画
  combine() {
    // 组合多种动画效果
    this.animation
      .translate(100, 50)    // 平移
      .rotate(180)          // 旋转
      .scale(1.5)           // 缩放
      .skew(10, 10)         // 倾斜
      .opacity(0.7)         // 透明度
      .step({               // 第一组动画参数
        duration: 1000,
        timingFunction: 'ease-out'
      })
      .translate(0, 0)      // 回到原位
      .rotate(0)            // 旋转复位
      .scale(1)             // 缩放复位
      .skew(0, 0)           // 倾斜复位
      .opacity(1)           // 透明度复位
      .step({               // 第二组动画参数
        duration: 800,
        timingFunction: 'ease-in',
        delay: 200          // 延迟200ms执行
      })
    
    // 更新数据并重置状态记录
    this.setData({
      animationData: this.animation.export()
    })
    
    // 重置状态记录
    this.data.currentTranslateX = 0
    this.data.currentTranslateY = 0
    this.data.currentRotate = 0
    this.data.currentScale = 1
    this.data.currentSkewX = 0
    this.data.currentSkewY = 0
    this.data.currentOpacity = 1
  },

  // 重置动画
  reset() {
    // 重置所有动画状态
    this.animation
      .backgroundColor('#1890FF')
      .width()
      .height()
      .translate(0, 0)
      .rotate(0)
      .rotateX(0)
      .rotateY(0)
      .rotateZ(0)
      .scale(1)
      .skew(0, 0)
      .skewX(0)
      .skewY(0)
      .opacity(1)
      // 重置使用matrix的变换
      .matrix(1, 0, 0, 1, 0, 0)
      // 如果使用了3D变换也需要重置
      .matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1)
      .rotate3d(0, 0, 0, 0)
      .translate3d('0', '0', '0')
      .translateX('0rpx')
      .translateY('0rpx')
      .translateZ('0rpx')
      .step()
    
    // 更新数据
    this.setData({
      animationData: this.animation.export(),
      boxColor: '#007aff'
    })
    
    // 重置状态记录
    this.data.currentTranslateX = 0
    this.data.currentTranslateY = 0
    this.data.currentRotate = 0
    this.data.currentScale = 1
    this.data.currentSkewX = 0
    this.data.currentSkewY = 0
    this.data.currentOpacity = 1
  },
  choose1(e) {
    this.setData({
      result: this.animation,
      apiName: e.currentTarget.dataset.apiname
    })
  },
  choose2(e) {
     // 设置背景色为绿色
     this.animation.backgroundColor('#1AAD19').step()   
   // 导出动画数据并设置到data中
   this.setData({
     animationData: this.animation.export()
   })
    this.setData({
      result: this.animation.backgroundColor('#1AAD19'),
      apiName: e.currentTarget.dataset.apiname
    })
  },
  choose3(e) {
    // 设置botton20rpx
    this.animation.bottom('20rpx').step()
  // 导出动画数据并设置到data中
  this.setData({
    animationData: this.animation.export()
  })
   this.setData({
     result: this.animation.bottom('20rpx'),
     apiName: e.currentTarget.dataset.apiname 
   })
 },
 choosetop(e){
    // 设置top100rpx
    this.animation.top('100rpx').step()
  // 导出动画数据并设置到data中
  this.setData({
    animationData: this.animation.export()
  })
   this.setData({
     result: this.animation.top('100rpx'),
     apiName: e.currentTarget.dataset.apiname 
   })
 },
 choose4(e) {
 this.setData({
   result: this.animation.export(),
   apiName: e.currentTarget.dataset.apiname 
 })
},
choose5(e) {
  // 设置botton20rpx
  this.animation.height('50rpx').step()
  // 导出动画数据并设置到data中
  this.setData({
    animationData: this.animation.export()
  })
  this.setData({
    result: this.animation.height('50rpx'),
    apiName: e.currentTarget.dataset.apiname 
  })
 },
 choose6(e) {
  // 设置botton20rpx
  this.animation.left('50rpx').step()
  // 导出动画数据并设置到data中
  this.setData({
    animationData: this.animation.export()
  })
  this.setData({
    result: this.animation.left('50rpx'),
    apiName: e.currentTarget.dataset.apiname 
  })
 },
  // 旋转并缩放效果
 choose7(e) {
  // 计算旋转45度并缩放0.5倍的矩阵值
  const angle = Math.PI / 4; // 45度
  const scale = 0.5;
  
  // 旋转矩阵 * 缩放矩阵
  const a = scale * Math.cos(angle);
  const b = scale * Math.sin(angle);
  const c = -scale * Math.sin(angle);
  const d = scale * Math.cos(angle);
  const tx = 0;
  const ty = 0;
  
  this.animation
    .matrix(a, b, c, d, tx, ty)
    .step()
    
  this.setData({
    animationData: this.animation.export()
  })
  this.setData({
    result: this.animation.matrix(a, b, c, d, tx, ty) ,
    apiName: e.currentTarget.dataset.apiname
  })
 },
 choose8(e){
  const angle = Math.PI / 4; // 45度
  const cos = Math.cos(angle);
  const sin = Math.sin(angle);
  
  // X轴旋转矩阵
  this.animation.matrix3d(
    1, 0, 0, 0,
    0, cos, sin, 0,
    0, -sin, cos, 0,
    0, 0, 0, 1
  ).step()
    // Y轴旋转矩阵
    this.animation.matrix3d(
      cos, 0, -sin, 0,
      0, 1, 0, 0,
      sin, 0, cos, 0,
      0, 0, 0, 1
    ).step()
    const zTranslate = -200; // Z轴平移距离
    // 透视矩阵（简化版）
    this.animation.matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0.001, // 透视参数
      0, 0, zTranslate, 1
    ).step()
  
  this.setData({
    animationData: this.animation.export()
  })
  this.setData({
    result:this.animation.matrix3d(),
    apiName: e.currentTarget.dataset.apiname
  })
 },
 choose9(e) {
  // 设置宽度50rpx
  this.animation.width('50rpx').step()
  // 导出动画数据并设置到data中
  this.setData({
    animationData: this.animation.export()
  })
  this.setData({
    result: this.animation.width('50rpx'),
    apiName: e.currentTarget.dataset.apiname 
  })
 },
 choose10(e) {
  //设置 right 值
  this.animation.right('50rpx').step()
  // 导出动画数据并设置到data中
  this.setData({
    animationData: this.animation.export()
  })
  this.setData({
    result: this.animation.right('50rpx'),
    apiName: e.currentTarget.dataset.apiname 
  })
 },
})
